import React from 'react';
import {Row, Col} from 'antd';
import './index.less';   //问题:为何必须加一个./   才能够确定具体路径
import Utils from '../../utils/utils';
import axios from '../../axios';
import './index.less';
import {connect} from "react-redux";


class Header extends React.Component {
    state = {
        userName: '小叮当'
    };

    componentWillMount() {
        setInterval(() => {
            let sysTime = Utils.formatDate(new Date().getTime());
            this.setState({
                sysTime
            })
        })
        this.getWeatherAPIData();
    }

    getWeatherAPIData = () => {
        let city = '北京';
        axios.jsonp({
            url:'http://api.map.baidu.com/telematics/v3/weather?location='+encodeURIComponent(city)+'&output=json&ak=3p49MVra6urFRGOT9s8UBWr2'
        }).then((res) => {
            if (res.status === 'success') {
                let data = res.results[0].weather_data[0];
                this.setState({
                    dayPictureUrl:data.dayPictureUrl,
                    weather:data.weather
                })
            }
        })


    };

    render() {
        const {menuType} =this.props;
        // console.log('wdwdthis.props',this.props)
        return (
            <div className="header">
                <Row className="header-top">



                    {
                        menuType ?
                            <div>
                                <Col span={6} className="logo">
                                    <img src="/assets/logo-ant.svg "/>
                                    <span>i mooc 通用管理系统</span>
                                </Col>
                                <Col span={18}>
                                    <span>欢迎， {this.state.userName}</span>
                                    <a href="#">quit</a>
                                </Col>
                            </div>

                            :
                            <Col span={24}>
                                <span>欢迎， {this.state.userName}</span>
                                <a href="#">quit</a>
                            </Col>


                    }

                </Row>

                {
                    menuType?'':
                        <Row className="bread-crumb">
                        <Col span={4} className="bread-crumb-title">
                            {this.props.menuName}
                        </Col>
                        <Col span={20} className="weather">
                            <span className="date">{this.state.sysTime}</span>
                            <span className="weather-img">
                            <img src={this.state.dayPictureUrl} alt=""/>
                        </span>
                            <span className="weather-detail">
                            {this.state.weather}
                        </span>

                        </Col>
                    </Row>

                }

            </div>
        );
    }

}
const mapStateToProps = state =>{
    console.log('state',state)
    return {
        menuName:state.menuName
    }
};

export default connect(mapStateToProps)(Header)
